<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>naturix</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css"/>
    <link rel="stylesheet" href="./css/header/header.css"/>
</head>
<body>
<!--navbar-static-top"-->
<nav class="navbar navbar-default navbar-fixed-top mynav">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">
                <p class="mynav-p">
                    <img src="./img/header/logo-icon.png" alt=""/>
                    <span class="mynav-sp1"><strong>naturix</strong></span>
                    <span class="mynav-sp2">水果铺子</span>
                    <span class="mynav-sp3">ORGAH&nbsp;&nbsp;STORE</span>
                </p>
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#">首页</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">商品</a></li>
                <li><a href="http://localhost:8888/fruitdetail/fruit/2004" target="ciframe">商品详情</a></li>
                <li><a href="#">联系我们</a></li>
                <li role="presentation" class="dropdown">
                    <a class="message-num" href="./charts.html" >
                        <img style="" src="./img/header/message.png" alt=""/>
                    </a>
                </li>

                <li><a href="#" class="collapse-a"><img src="./img/header/cart-icon.png" alt=""/></a><span>&nbsp;￥201.00</span></li>
                <li><a href="#" data-toggle="modal" data-target=".bs-example-modal-lg"><img src="../img/header/me.png" alt=""/></a></li>
                <li><a href="#"><img src="../img/header/menu.png" alt=""/></a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>

<div style="height: 100%">
    <div style="margin-top: 80px"></div>
    <iframe src="" id="content" name="ciframe" scrolling="no" frameborder="0" height="10px" width="100%" onload="this.height = ciframe.document.body.scrollHeight"></iframe>
</div>


<script src="./js/jquery.min.js" type="text/javascript"></script>
<script src="./js/bootstrap.min.js"></script>

<script>

    //获取消息
    function messageAlert() {

        $.ajax({
            url:"/comment/message",
            type:"post",
            success:function (data) {
                console.log(data);
                var notReadAmount = 0;

                for (var i=0; i<data.length; i++){
                    for (var j=0; j<data[i].commentMessageInfos.length; j++){
                        notReadAmount++;
                    }
                }
                $('.message-num').append('<span id="message-num">'+notReadAmount+'</span>');
            }
        });
    }
    messageAlert();

</script>
<!--server地址 :  <input id ="serveraddress" type="text" value="commentalert"/><br/>-->
<!--您的用户id :  <input id ="userId" type="text" /><br/>-->
<!--<button onclick="initSocket()">连接</button><br/>-->
<!--<button onclick="socketClose()">关闭连接</button>-->

<script type="text/javascript">

    var heartflag = false;
    var webSocket = null;
    var tryTime = 0;
    $(function () {

        window.onbeforeunload = function () {

        };
    });

    function socketClose() {
        webSocket.close();
    }

    /**
     * 初始化websocket，建立连接
     */
    function initSocket() {
        var serveraddress = $("#serveraddress").val();
        var userId = $("#userId").val();

        if (!window.WebSocket) {
            alert(getNowFormatDate()+"  您的浏览器不支持ws<br/>");
            return false;
        }

        webSocket = new WebSocket("ws://localhost:8888/"+serveraddress+"/"+userId);

        // 收到服务端消息
        webSocket.onmessage = function (msg) {

            if (msg.data == "comment"){
                messageAlert();
            }
            $("#receivedMessage").append(getNowFormatDate()+"  收到消息 : "+msg.data+"<br/>");

        };

        // 异常
        webSocket.onerror = function (event) {
            heartflag = false;
            alert(getNowFormatDate()+"  异常<br/>");
        };

        // 建立连接
        webSocket.onopen = function (event) {
            heartflag = true;
            alert(getNowFormatDate()+"  建立连接成功<br/>");
            tryTime = 0;
        };

        // 断线重连
        webSocket.onclose = function () {
            alert("关闭连接")
        };

    }

    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var seperator2 = ":";
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
            + " " + date.getHours() + seperator2 + date.getMinutes()
            + seperator2 + date.getSeconds();
        return currentdate;
    }

</script>

<!--<script>-->
    <!--$('#test').click(function (){-->
        <!--$('#alert').trigger("click");-->
    <!--})-->
<!--</script>-->
</body>

</html>